<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>产品管理</title>
    <link rel="stylesheet" type="text/css" href="../../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base/base.css?20201106.1"/>
    <link rel="stylesheet" type="text/css" href="../../css/news/center.css"/>
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/lib/laydate/skins/default/laydate.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="../../js/news/page.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../lib/laydate/laydate.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;}
        .header{
            margin-top: 15px;
            height: 40px;
        }
        .header .title{
            margin-left: 22px;
        }
        .header span{
            float: none;
            font-size: 22px;
            color: #333;
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: -6px;
        }
        .content_label{
            line-height: 28px;
            font-size: 15px;
            color: rgb(111, 111, 111);
        }
        .content_label ul li{
            height: 16px;
            line-height: 16px;
            padding: 5px 12px;
            margin: 25px 0px;
            font-size: 15px;
            border-radius: 3px;
            display: inline;
        }
        .content_label ul{
            margin: 15px 0;
        }
        .pagediv table thead {
            background: white;
            line-height: 40px;
            border-bottom: 1px #dddddd solid;
            font-size: 13pt;
            color: #2F5C8F;
            font-weight: bold;
            height: 50px;
            border: 0px;
        }
        .pagediv tr:hover {
            background-color: #D3E7FA;
        }
        .pagediv tr:nth-child(odd) {
            background-color: #F6F7F9;
        }
        .pagediv tr:nth-child(odd) {
            background-color: #F6F7F9;
        }
        .queries{
            padding: 10px 20px;
            height: 40px;
        }
        #pageTbody tr{
            height: 40px;
        }
        .editAndDelete0{
            color: #2b7fe0;
        }
        .editAndDelete1{
            color: #2b7fe0;
        }
        .editAndDelete2{
            color: red;
        }
        #pop-up{
            height: 100%;
            position: fixed;
            top: -2px;
            right: -600px;
            display: none;
        }
        #keyWords{
            width: 130px;
            height: 30px;
            padding-left: 5px
        }
        .index_content_1 .one{
            color: white;
            padding: 4px;
        }
        .index_content_2 .one{
            color: white;
            padding: 4px;
        }

        #add_Excel{
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 4px;
            padding-left: 35px;
            background-image: url(../../img/import/import.png);
            margin-top: -4px ;
        }
        #export{
            background-image: url(../../img/import/export.png);
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 4px;
            padding-left: 35px;
            margin-top: -4px ;
        }
        .one{
            width: 120px;
            height: 30px;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 5px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<!--head开始-->
<div class="header">
    <div class="title">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/flow_run_title.png"><span style="">产品管理</span>
        <hr style="background-color: black"/>
    </div>
</div>
<div class="content_label">
</div>
<div class="queries">
    <label>
        <input  placeholder="请输入产品名称" type="text" id="keyWords" style="border-radius: 3px;margin-bottom: 2px;"/>
        <button  type="button" class="one" id="query_btn" style="width: 120px">
            <img src="../../img/workflow/worksearch1.png" style="margin-right: 8px;margin-bottom: 2px;"/>查询
        </button>
        <input  type="button" class="inquire_btn" value="导出" id="export"/>
        <input  type="button" class="inquire_btn" value="导入" id="add_Excel" onclick="javascript:window.location.href='/product/importProduct'"/>
        <button  type="button" class="one" id="add_btn" style="width: 120px;" onclick="javascript:window.location.href='/product/addProduct'">
            <img src="../../img/mywork/newbuildworjk1.png" style="margin-right: 8px;margin-bottom: 2px;"/>新建
        </button>
    </label>
</div>
<div id="pagediv">

</div>

<div id="pop-up" >
    <iframe id="childFrame" style="width: 520px;height: 100%"  frameborder="no" border="0" ></iframe>
</div>
</body>
<script>
    //        tab切换
    $(".index_content_1").on("click","li",function(){
        $(this).siblings('li').removeClass("one");
        $(this).addClass('one');
    });
    $(".index_content_2").on("click","li",function(){
        $(this).siblings('li').removeClass("one");
        $(this).addClass('one');
    });
    $(function () {
        //表格初始化
        var screenwidth = document.documentElement.clientWidth;
        if (screenwidth  > 2200) {
            var nums = screenwidth * 0.97;
            var sumwidth = screenwidth * 0.97 + 'px';
        } else {
            var nums = 800;
            var sumwidth = '1250px';
        }
        var width0 = nums * 0.125 + 'px';
        var width1 = nums * 0.065 + 'px';
        var width2 = nums * 0.065 + 'px';
        var width3 = nums * 0.065 + 'px';
        var width4 = nums * 0.065 + 'px';
        var width5 = nums * 0.085 + 'px';
        var width6 = nums * 0.065 + 'px';
        var width7 = nums * 0.065 + 'px';
        pageObj=$.tablePage('#pagediv',sumwidth,[
            {
                width:width0,
                title:'产品名称',
                name:'productName',
                selectFun:function (n,obj) {
                    if(obj.productName==undefined){
                        return " "
                    }else{
                        return obj.productName;
                    }
                }
            },
            {
                width:width1,
                title:'产品类型',
                name:'type',
                selectFun:function (n,obj) {
                    if(obj.type==undefined){
                        return " "
                    }else{
                        return obj.type;
                    }
                }
            },
            {
                width:width2,
                title:'计量单位',
                name:'meteringUnit',
                selectFun:function (n,obj) {
                    if(obj.meteringUnit==undefined){
                        return " "
                    }else{
                        return obj.meteringUnit;
                    }
                }
            },
            {
                width:width3,
                title:'成本价(元)',
                name:'cost',
                selectFun:function (n,obj) {
                    if(obj.cost==undefined){
                        return " "
                    }else{
                        return obj.cost;
                    }
                }
            },
            {
                width:width4,
                title:'销售价(元)',
                name:'price ',
                selectFun:function (n,obj) {
                    if(obj.price==undefined){
                        return " "
                    }else{
                        return obj.price;
                    }
                }
            },
            {
                width:width5,
                title:'创建时间',
                name:'createTime',
                selectFun:function (n,obj) {
                    if(obj.createTime==undefined){
                        return " "
                    }else{
                        return obj.createTime;
                    }
                }
            },
            {
                width:width6,
                title:'创建人',
                name:'creator',
                selectFun:function (n,obj) {
                    if(obj.creator==undefined){
                        return " "
                    }else{
                        return obj.creator;
                    }
                }
            },
            {
                width:width7,
                title:'操作',
                name:'orgAddress'
            }
        ],function (me) {
            me.data.pageSize=5;// 每一页显示的数据条数
            // 初始化的加载数据
            me.init("/product/selectByConditionProduct",[
                {name:'详情'},
                {name:'编辑'},
                {name:'删除'},
            ],function () {
                // 获取产品名称进行模糊查询
                $('#query_btn').click(function () {
                    var keyWords=$('#keyWords').val();
                    me.data.productName = keyWords;
                    //每次模糊查询时初始化页码从第一页开始查询
                    me.data.page=1;
                    me.init("/product/selectByConditionProduct");
                })
                $('.page-top-inner-layer table tr').eq(0).css('background-color','#FFFFFF')
                // 获取导出按钮点击事件
                $('#export').click(function () {
                    window.location.href='/product/queryExportProduct?isExport=yes';
                })
            });
        });

        // 根据产品id进行修改产品
        $('#pageTbody').on('click','.editAndDelete1',function(){
            var productId = pageObj.arrs[$(this).attr('data-i')].productId;
            //根据查询的id跳转到映射页面
            window.location.href = '/product/updateProduct?productId='+productId;
        });

        // 根据产品id查看产品详情
        $('#pageTbody').on('click','.editAndDelete0',function(){
            var productId = pageObj.arrs[$(this).attr('data-i')].productId;
            //根据查询的id跳转到映射页面
            window.location.href = '/product/detailsProduct?productId='+productId;
        });

        // ajax 根据产品信息表[crm_product]的主键id进行删除数据
        $('#pageTbody').on('click','.editAndDelete2',function(){
            var productId=pageObj.arrs[$(this).attr('data-i')].productId;
            layer.confirm(qued,{
                btn: [sure,cancel], //按钮
                title:'确定删除？'
            }, function(){
                $.ajax({
                    type:'post',
                    url:'/product/delProductById',
                    dataType:'json',
                    data:{'productId':productId},
                    success: function (json) {
                        // 删除成功后调到展示页面
                        window.location.href='/product/showProduct'
                    }
                })
            });
        });
    });
</script>

</html>
